<template>
	<view class="home">
		<image :src="_static('/images/Rectangle 2@2x.png')" class="homeback" mode="">
		</image>
		<view class="headertop" :style="{'background':back1}">
			<view class="box"
				:style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px','display':'flex','align-items': 'center'}">

				<view class="ssbox" @click="show=true">
					<span>{{city?city:'请选择'}}</span>
					<image :src="_static('/images/微信图片_20250630092057.png')" style="margin-left: 4rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">

		</view>
		<view class="tqbox">
			<image :src="_static('/images/Rectangle 4@2x.png')" class="tqboxback" mode="">
			</image>
			<view class="leftbox">

				<view class="tianqi">
					<view class="t1">{{weatherobj['temperature']||'--'}}</view>
					<view class="t2">
						℃ {{weatherobj['weather']}}
						<view class="tt">
							<span style="margin-right: 8rpx;">PM值：{{weatherobj['aqi']}} </span> 湿度：{{weatherobj['sd']}}
						</view>
					</view>
				</view>

				<view class="hbjc" @click="gapage('花粉检测')">
					<view class="reduce">

					</view>
					<view class="text" style="white-space: nowrap;">
						花粉检测
					</view>
					<image :src="_static('/images/Frjt.png')" class="arrowright" mode=""></image>
				</view>

			</view>
			<image :src="weatherobj['weather_pic']" class="sunimage" mode=""></image>
		</view>
		<view class="bottombox">
			<view class="navboxs">
				<view class="itemnav" style="margin-left: 40rpx;" @click="gapage('量表评估')">
					<image :src="_static('/images/Group 10@2x.png')" mode=""></image>
					<span>量表评估</span>
				</view>
				<view class="itemnav" @click="gapage('脱敏管理')">
					<image :src="_static('/images/Group 11@2x.png')" mode="">
					</image>
					<span>脱敏管理</span>
				</view>
				<view class="itemnav" @click="gapage('中医辨证')">
					<image :src="_static('/images/Group 12@2x.png')" mode=""></image>
					<span>中医辨证</span>
				</view>
				<view class="itemnav" @click="gapage('健康商城')">
					<image src="https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/Group 13@2x.png" mode=""></image>
					<span>健康商城</span>
				</view>
				<view class="itemnav" style="margin-right: 40rpx;" @click="gapage('快速咨询')">
					<image :src="_static('/images/Group 14@2x.png')" mode=""></image>
					<span>快速咨询</span>
				</view>
			</view>
			<view class="modulesbox">
				<view class="topboxss">
					<view class="box1" @click="gapage('哮喘管理')">
						<image :src="_static('/images/Group 11649@2x.png')" class="box1img" mode="">
						</image>
						<view class="texts">
							<view class="t1">
								哮喘管理
							</view>
							<view class="t2">
								哮喘症状监测
							</view>
						</view>
					</view>
					<view class="box1" @click="gapage('鼻炎管理')">
						<image :src="_static('/images/Group 11650@2x.png')" class="box1img" mode="">
						</image>
						<view class="texts">
							<view class="t1">
								鼻炎管理
							</view>
							<view class="t2">
								鼻炎症状记录
							</view>
						</view>
					</view>
				</view>
				<view class="bottomboxs">
					<view class="box" @click="gapage('皮炎管理')">
						<image :src="_static('/images/Group 11653@2x.png')" class="boximage" mode="">
						</image>
						<view class="t1">
							皮炎管理
						</view>
						<image :src="_static('/images/Group 11725@2x.png')" class="xjt" mode=""></image>
					</view>
					<view class="box" @click="gapage('肠胃炎管理')">
						<image :src="_static('/images/Group 11651@2x.png')" class="boximage" mode="">
						</image>
						<view class="t1">
							肠胃炎管理
						</view>
						<image :src="_static('/images/Group 11725@2x.png')" class="xjt" mode=""></image>
					</view>
					<view class="box" @click="gapage('中医治疗管理')">
						<image :src="_static('/images/Group 11652@2x.png')" class="boximage" mode="">
						</image>
						<view class="t1">
							中医治疗管理
						</view>
						<image :src="_static('/images/Group 11725@2x.png')" class="xjt" mode=""></image>
					</view>
				</view>
			</view>
			<view class="zhilfan">
				<up-swiper height="111" autoplay circular="true" :list="list5" @change="e => current = e.current"
					@click="clickloop">
					<template #indicator>
						<view class="indicator">
							<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
								:class="[index === current && 'indicator__dot--active']">
							</view>
						</view>
					</template>
				</up-swiper>
			</view>
			<view class="daibanbox">
				<view class="centerbox">
					<view class="titlebox">
						<image :src="_static('/images/Group 11682@2x(1).png')" class="imgbox" mode="">
						</image>
						<span>待办提醒</span>
					</view>
					<view class="imageboxs">
						<view class="leftimage" @click="gapage('个人资料完善')" v-if="!userobj">
							<image :src="_static('/images/Group 11655@2x.png')" class="poimage" mode="">
							</image>
							<view class="texts">
								<view class="t1">
									个人资料完善
								</view>
								<view class="t2">
									让您的健康管理更全面
								</view>
							</view>
							<view class="liji">
								立即完善
							</view>
						</view>
						<view class="rightbox" v-if="!userobj">
							<view class="itemb" @click="gapage('过敏日记')">
								<image :src="_static('/images/Group 11656@2x.png')" class="itemback" mode=""></image>
								<view class="texts">
									<view class="t1">
										过敏日记
									</view>
									<view class="t2">
										轻松管理过敏状况
									</view>
								</view>
							</view>
							<view class="itemb" style="margin-top: 24rpx;" @click="gapage('用药日记')">
								<image :src="_static('/images/Group 11657@2x.png')" class="itemback" mode=""></image>
								<view class="texts">
									<view class="t1">
										用药日记
									</view>
									<view class="t2">
										轻松填写用药记录
									</view>
								</view>
							</view>
						</view>
						<view class="itemb" @click="gapage('过敏日记')" v-if="userobj">
							<image :src="_static('/images/Group 11656@2x.png')" class="itemback" mode=""></image>
							<view class="texts">
								<view class="t1">
									过敏日记
								</view>
								<view class="t2">
									轻松管理过敏状况
								</view>
							</view>
						</view>
						<view class="itemb" @click="gapage('用药日记')" v-if="userobj">
							<image :src="_static('/images/Group 11657@2x.png')" class="itemback" mode=""></image>
							<view class="texts">
								<view class="t1">
									用药日记
								</view>
								<view class="t2">
									轻松填写用药记录
								</view>
							</view>
						</view>
					</view>
					<view class="imagebottom">
						<view class="itemb" @click="gapage('生物制剂管理')">
							<image :src="_static('/images/Group 11659@2x.png')" class="itemback" mode="">
							</image>
							<view class="texts">
								<view class="t1">
									生物制剂管理
								</view>
								<view class="t2">
									跟踪治疗进程
								</view>
							</view>
						</view>
						<view class="itemb" @click="gapage('中医治疗')">
							<image :src="_static('/images/Group 11658@2x.png')" class="itemback" mode=""></image>
							<view class="texts">
								<view class="t1">
									中医治疗
								</view>
								<view class="t2">
									温和中医手法
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="aipinggu" @click="gapage('评估')">
				<image :src="_static('/images/ai_banner.png')" class="imgbox" mode="widthFix"></image>
				<image :src="_static('/images/right_jt.png')" class="arrowright" mode=""></image>
			</view>
			<view class="daibanbox">
				<view class="centerbox">
					<view class="titlebox">
						<image :src="_static('/images/Group 11682@2x(1).png')" class="imgbox" mode="">
						</image>
						<span>问卷</span>
					</view>
					<view class="contents">
						<view class="msgicon" v-if="!List.length">
							<image :src="_static('/images/wxnone.png')" mode="widthFix">
							</image>
							<view class="msgtext">
								暂无内容
							</view>
						</view>
						<view class="itemboxx1" v-for="(item,index) in List" @click="gapage('问卷',item)">
							<image :src="item.image" mode="" class="imgh"></image>
							<view class="textss">
								{{item.title}}
							</view>
						</view>
					</view>

				</view>
			</view>
			<!-- 	<view class="wenjuanqiehuan" :style="{height:active==0?'':'560rpx'}">
				<image :src="backimg" class="wenjuanqiehuanimg" mode="widthFix"></image>
				<view class="tabqiehuan">
					<view :class="active==0?'itemboxx1':'itemboxx'" @click="ff(0)">
						问卷
					</view>
					<view :class="active==1?'itemboxx1':'itemboxx'" @click="ff(1)">
						评估
					</view>
				</view>
				<view class="backff">
					<view class="contents" v-if="active==0">
						<view class="msgicon" v-if="!List.length">
							<image :src="_static('/images/wxnone.png')" mode="widthFix">
							</image>
							<view class="msgtext">
								暂无内容
							</view>
						</view>
						<view class="itemboxx1" v-for="(item,index) in List" @click="gapage('问卷',item)">
							<image :src="item.image" mode="" class="imgh"></image>
							<view class="textss">
								{{item.title}}
							</view>
						</view>
					</view>
					<view class="aiimg" v-if="active==1">
						<image class="aiimgback" :src="_static('/images/微信图片_20250707155156.png')" mode="widthFix">
						</image>
						<view class="pingu" @click="gapage('评估')">

						</view>
					</view>
				</view>
			</view> -->
		</view>
		<up-popup :show="show" mode="bottom">
			<view class="back">
				<view class="xuanxiang">
					<view class="tt" style="margin-left: 30rpx;color: #888;" @click="show=false">
						取消
					</view>
					<view class="tt" style="font-weight: 600;">
						请选择城市
					</view>
					<view class="tt" style="margin-right: 30rpx;color: #0077BE;" @click="queding">
						确认
					</view>
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="zhidfun(chengshilist,city)" immediate-change="true"
				@change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in chengshilist" :key="index">
						{{item['shortname']}}
					</view>
				</picker-view-column>
				<picker-view-column v-if="chengshilist[active1]">
					<view class="item" v-for="(item,index) in chengshilist[active1]['children']" :key="index">
						{{item['shortname']}}
					</view>
				</picker-view-column>
			</picker-view>
		</up-popup>
		<view class="" style="height: 220rpx;">
		</view>
		<userlogin @updata="userinfoinit" ref="denglu"></userlogin>
		<Tabbar page="/pages/index/index"></Tabbar>
	</view>
</template>

<script setup>
	import userlogin from '@/components/getuser/getuser.vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	import ulm, {
		$api
	} from '@/ulm';
	import {
		setToken,
		getToken,
	} from '@/ulm/utils/auth';
	import {
		_static
	} from '@/ulm/utils/url.js'
	import Tabbar from '@/components/tabbar.vue'
	import {
		getCurrentInstance,
		onMounted,
		ref,
		reactive
	} from 'vue'
	import formItem from '../../uni_modules/uview-plus/components/u-form-item/formItem';
	const barHeight = ref('')
	const indicatorStyle = ref(`height: 40px`)
	const current = ref(0)
	const statusBarHeight = ref('')
	const active = ref(0)
	const show = ref(false)
	const back1 = ref('')
	const userobj = ref(null)
	const List = ref([])
	const chengshilist = ref([])
	const city = ref('')
	const denglu = ref(null)
	const weatherobj = ref({})
	const bannerContent = ref({})
	const list5 = ref([]);
	const cityname = ref('')
	const active1 = ref(0)
	const {
		proxy
	} = getCurrentInstance()
	onLoad(() => {
		wenjuanlistinit()
		if (getToken()) {
			userinfoinit()
		}
		bannerlistinit()
		chengshiListinit()
	})

	const backimg = ref('https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/微信图片_20250707155806.png')
	async function chengshiListinit() {
		const res = await $api.cityData()
		if (res.code == 1) {
			chengshilist.value = res.data
			var chengshitext = uni.getStorageSync('cityVal')
			if (chengshitext) {
				city.value = chengshitext
				cityname.value = chengshitext
				for (var i in chengshilist.value) {
					for (var ii in chengshilist.value[i]['children']) {
						if (city.value.indexOf(chengshilist.value[i]['children'][ii]['shortname']) != -1) {
							active1.value = i
						}
					}
				}
			}
		}
	}

	function bindChange(e) {
		const val = e.detail.value
		active1.value = val[0]
		cityname.value = chengshilist.value[val[0]]['children'][val[1]]['shortname']
	}


	function queding() {
		if (!cityname.value) {
			city.value = chengshilist.value[0]['children'][0]['shortname']
		} else {
			city.value = cityname.value
		}
		uni.setStorageSync('cityVal', city.value)
		gettianqi(city.value)
		show.value = false
	}


	async function bannerlistinit() {
		const res = await $api.bannerlist({
			page: 'index'
		})
		if (res.code == 1) {
			list5.value = res.data.map(item => item.image)
			bannerContent.value = res.data
		}
	}

	function ff(num) {
		active.value = num
		if (num != 0) {
			backimg.value = _static('/images/微信图片_20250707155757.png')
		} else {
			backimg.value = _static('/images/微信图片_20250707155806.png')
		}
	}
	onShow(() => {
		if (getToken()) {
			userinfoinit()
		}
		// 获取缓存中获取的城市 判断如果之前授权过城市地区 就不让重新授权
		var chengshitext = uni.getStorageSync('cityVal')
		if (chengshitext) {
			// 获取该缓存城市的天气
			gettianqi(chengshitext)
			return
		}
		uni.getSetting({
			success: (res) => {
				if (!res.authSetting['scope.userLocation']) {
					// 未授权，发起授权请求
					uni.authorize({
						scope: 'scope.userLocation',
						success: () => {
							getLocation()
						},
						fail: () => {
							uni.showModal({
								title: '提示',
								content: '需要位置权限才能使用该功能',
								confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
								success(res1) {
									if (res1.confirm) {
										uni.openSetting({
											success(res) {
												if (res
													.authSetting[
														'scope.userLocation'
													]) {
													getLocation()
												} else {
													uni.showToast({
														title: '位置授权失败',
														icon: 'none'
													})
												}
											}
										})
									}
								}
							});
						}
					});
				} else {
					// 已授权，直接获取位置
					getLocation()
				}
			}
		});
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#CAEEFF'
		} else {
			back1.value = ''
		}
	})
	async function userinfoinit() {
		const res = await $api.userinfo()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}


	async function wenjuanlistinit() {
		const res = await $api.wenjuanlist()
		if (res.code == 1) {
			List.value = res.data
		}
	}

	function clickloop(e) {

		return
		if (bannerContent.value[e]['jump_page'] == 'shop') {
			uni.switchTab({
				url: '/pages/shoppingmal/shangcheng'
			})
		} else if (bannerContent.value[e]['jump_page'] == 'rent') {
			uni.switchTab({
				url: '/pages/shoppingmal/index'
			})
		}
	}

	function getLocation() {
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {

				getCityByLatLnginit(res)
			},
			fail: (err) => {
				uni.showToast({
					title: '获取定位失败',
					icon: 'none'
				})
			}
		});
	}

	function zhidfun(arr, cityname1) {
		if (!cityname1) return [0, 0]
		for (var i in arr) {
			for (var ii in arr[i]['children']) {
				if (cityname1.indexOf(arr[i]['children'][ii]['shortname']) != -1) {

					return [i * 1, ii * 1]
				}
			}
		}
	}
	async function getCityByLatLnginit(res1) {
		const res = await $api.getCityByLatLng({
			longitude: res1.longitude,
			latitude: res1.latitude
		})
		if (res.code == 1) {
			uni.setStorageSync('cityVal', res.data.shortname)
			city.value = res.data.shortname
			cityname.value = res.data.shortname
			for (var i in chengshilist.value) {
				for (var ii in chengshilist.value[i]['children']) {
					if (city.value.indexOf(chengshilist.value[i]['children'][ii]['shortname']) != -1) {
						active1.value = i
					}
				}
			}
			gettianqi(res.data.shortname)
		}
	}
	async function gettianqi(shortname) {
		const res = await $api.getweather({
			city: shortname,
		})
		if (res.code == 1) {
			weatherobj.value = res.data
		}
	}

	async function gapage(str, item) {
		if (str == '中医治疗') {
			uni.navigateTo({
				url: '/sub_index/index/zhongyizhiliao'
			})
			return
		}
		if (str == '中医治疗管理') {
			uni.navigateTo({
				url: '/sub_index/index/zyzlimg'
			})
			return
		}
		if (str == '花粉检测') {
			uni.navigateTo({
				url: '/sub_index/index/huafenjiance'
			})
			return
		}

		if (str == '量表评估') {
			uni.navigateTo({
				url: '/sub_index/index/liangbiaopnggucaidan'
			})
			return
		}

		if (str == '脱敏管理') {
			uni.navigateTo({
				url: '/sub_index/index/tuomingguanli'
			})
			return
		}
		if (str == '中医辨证') {
			uni.navigateTo({
				url: '/sub_index/index/zhongyibianz1'
			})
			return
		}
		if (str == '快速咨询') {
			uni.navigateTo({
				url: '/sub_index/index/kuaisuzixun'
			})
			return
		}


		if (str == '哮喘管理') {
			uni.navigateTo({
				url: '/sub_index/index/xcgl'
			})
			return

		}

		if (str == '鼻炎管理') {
			uni.navigateTo({
				url: '/sub_index/index/biyanguanli'
			})
			return
		}
		if (str == '皮炎管理') {
			uni.navigateTo({
				url: '/sub_index/index/piyangl'
			})
			return
		}
		if (str == '肠胃炎管理') {
			uni.navigateTo({
				url: '/sub_index/index/cwygl'
			})
			return
		}

		if (!getToken()) {
			denglu.value.DengLu()
			return
		}



		if (str == '个人资料完善') {
			if (!userobj.value) {
				uni.navigateTo({
					url: '/sub_index/index/bianjigerenziliao'
				})
				return
			}
			uni.navigateTo({
				url: '/sub_index/index/gerenziliao'
			})
			return
		} else if (str == '问卷') {
			uni.navigateTo({
				url: '/sub_index/index/wenjuan?titlestr=' + item.title + '&id=' + item.id
			})
		} else if (str == '健康商城') {
			uni.switchTab({
				url: '/pages/shoppingmal/shangcheng'
			})
		} else if (str == '过敏日记') {
			uni.navigateTo({
				url: '/sub_index/index/guominriji'
			})
		} else if (str == '用药日记') {
			uni.navigateTo({
				url: '/sub_index/index/useyaoriji'
			})
		} else if (str == '生物制剂管理') {
			uni.navigateTo({
				url: '/sub_index/index/swzjgl'
			})
		} else if (str == '评估') {
			const res = await $api.wechatCheck()
			if (res.code == 1) {
				if (res.data.is_check == 1) {
					uni.navigateTo({
						url: '/sub_index/index/liangbiaopnggucaidan'
					})
				} else {
					uni.navigateTo({
						url: '/sub_index/index/pinggu'
					})
				}
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}


		}
	}
</script>

<style lang="scss">
	.back {
		background: #FFFFFF;
		width: 100%;
		overflow: hidden;
		border-radius: 30rpx 30rpx 0 0;

		.xuanxiang {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			overflow: hidden;
			justify-content: space-between;
			margin-bottom: 30rpx;
			background: #FFFFFF;

			.tt {
				font-size: 32rpx;
			}
		}

	}

	.picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	::v-deep .u-popup__content {
		border-radius: 20rpx 20rpx 0 0;
	}


	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;
		position: relative;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	page {
		background: #F7F8FA;
	}

	::v-deep .u-swiper__indicator {
		bottom: 8px !important;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			width: 30rpx;
			height: 4rpx;
			border-radius: 2rpx 2rpx 2rpx 2rpx;
			background: rgba(166, 109, 51, 0.2);
			margin: 0 2px;
			transition: background-color 0.3s;

			&--active {
				background-color: #fff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.home {
		width: 100%;
		overflow: hidden;
		position: relative;

		.wenjuanqiehuan {
			width: 686rpx;
			margin: auto;
			margin-top: 32rpx;
			overflow: hidden;
			border-radius: 20rpx;
			position: relative;
			// background: #fff;

			.wenjuanqiehuanimg {
				width: 100%;
				position: absolute;
			}

			.aiimg {
				width: 638rpx;
				margin: auto;
				position: relative;
				height: 600rpx;

				.pingu {
					width: 476rpx;
					height: 76rpx;
					position: absolute;
					z-index: 999;
					margin-left: 80rpx;
					top: 0;
					margin-top: 250rpx;
				}

				.aiimgback {
					width: 638rpx;
					position: relative;
				}
			}

			.backff {
				width: 100%;
				overflow: hidden;
				background: #fff;

				.contents {
					width: 646rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin: auto;
					margin-top: 20rpx;
					// height: 550rpx;

					.itemboxx1 {
						width: 308rpx;
						overflow: hidden;
						height: 346rpx;
						border-radius: 20rpx;
						z-index: 99;
						background: #F7F8FA;
						margin-bottom: 28rpx;

						.imgh {
							width: 308rpx;
							height: 248rpx;
						}

						.textss {
							width: 286rpx;
							background: #F7F8FA;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #1D2129;
							padding: 4rpx 6rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							/* 限制显示的文本行数为2行 */
							border-radius: 0rpx 0rpx 20rpx 20rpx;
						}
					}
				}
			}

			.tabqiehuan {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				z-index: 999;

				.itemboxx1 {
					width: 50%;
					height: 100rpx;
					text-align: center;
					z-index: 999;
					line-height: 100rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #1D2129;
				}

				.itemboxx {
					width: 50%;
					height: 100rpx;
					text-align: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #4E5969;
					z-index: 999;
					line-height: 100rpx;
				}
			}
		}

		.headertop {
			width: 100%;
			position: fixed;
			top: 0%;
			overflow: hidden;
			transition: 0.5s;
			z-index: 9999;
		}

		.ssbox {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1D2129;
			width: 150rpx;
			margin-left: 45rpx;

			image {
				width: 22rpx;
				height: 14rpx;
			}
		}

		.pagelefticon {
			width: 120rpx;
			height: 40rpx;
			z-index: 9999;
			margin-left: 30rpx;
		}

		.homeback {
			width: 100%;
			height: 558rpx;
			position: absolute;
			z-index: -1;
		}

		.bottombox {
			width: 100%;
			background: #F7F8FA;
			box-shadow: 0rpx -4rpx 14rpx 0rpx rgba(143, 217, 254, 0.29);
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			overflow: hidden;
			margin-top: -55rpx;

			.aipinggu {
				width: 686rpx;
				margin: auto;
				margin-top: 32rpx;
				position: relative;
				display: flex;
				align-items: center;

				.imgbox {
					width: 100%;
				}

				.arrowright {
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					z-index: 999;
					right: 30rpx;
				}
			}

			.daibanbox {
				width: 686rpx;
				max-height: 630rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0, 0, 0, 0.07);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 32rpx;

				.centerbox {
					width: 630rpx;
					margin: auto;
					overflow: hidden;
					margin-top: 32rpx;

					.contents {
						width: 646rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						margin: auto;
						margin-top: 30rpx;

						.itemboxx1 {
							width: 308rpx;
							overflow: hidden;
							height: 346rpx;
							border-radius: 20rpx;
							z-index: 99;
							background: #F7F8FA;
							margin-bottom: 28rpx;

							.imgh {
								width: 308rpx;
								height: 248rpx;
							}

							.textss {
								width: 286rpx;
								background: #F7F8FA;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #1D2129;
								padding: 4rpx 6rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								/* 限制显示的文本行数为2行 */
								border-radius: 0rpx 0rpx 20rpx 20rpx;
							}
						}
					}

					.imagebottom {
						width: 100%;
						overflow: hidden;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 28rpx;
						margin-bottom: 28rpx;

						.itemb {
							width: 302rpx;
							height: 152rpx;
							position: relative;
							z-index: 999;
							overflow: hidden;

							.texts {
								width: 244rpx;
								margin-left: 20rpx;
								margin-top: 28rpx;
								overflow: hidden;
								z-index: 999;

								.t1 {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 28rpx;
									color: #1D2129;
								}

								.t2 {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 22rpx;
									color: #4E5969;
									margin-top: 14rpx;
								}
							}

							.itemback {
								width: 302rpx;
								height: 152rpx;
								position: absolute;
								z-index: -1;
							}
						}
					}

					.imageboxs {
						width: 100%;
						overflow: hidden;
						display: flex;
						align-items: center;
						margin-top: 32rpx;
						justify-content: space-between;

						.rightbox {
							width: 302rpx;
							overflow: hidden;

							.itemb {
								width: 302rpx;
								height: 152rpx;
								position: relative;
								z-index: 999;
								overflow: hidden;

								.texts {
									width: 244rpx;
									margin-left: 20rpx;
									margin-top: 28rpx;
									overflow: hidden;
									z-index: 999;

									.t1 {
										font-family: PingFang SC, PingFang SC;
										font-weight: bold;
										font-size: 28rpx;
										color: #1D2129;
									}

									.t2 {
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 22rpx;
										color: #4E5969;
										margin-top: 14rpx;
									}
								}

								.itemback {
									width: 302rpx;
									height: 152rpx;
									position: absolute;
									z-index: -1;
								}
							}
						}

						.itemb {
							width: 302rpx;
							height: 152rpx;
							position: relative;
							z-index: 999;
							overflow: hidden;

							.texts {
								width: 244rpx;
								margin-left: 20rpx;
								margin-top: 28rpx;
								overflow: hidden;
								z-index: 999;

								.t1 {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 28rpx;
									color: #1D2129;
								}

								.t2 {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 22rpx;
									color: #4E5969;
									margin-top: 14rpx;
								}
							}

							.itemback {
								width: 302rpx;
								height: 152rpx;
								position: absolute;
								z-index: -1;
							}
						}

						.leftimage {
							width: 302rpx;
							height: 328rpx;
							position: relative;
							overflow: hidden;
							z-index: 999;

							.liji {
								width: 140rpx;
								height: 44rpx;
								background: #FFFFFF;
								border-radius: 24rpx 24rpx 24rpx 24rpx;
								text-align: center;
								line-height: 44rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 26rpx;
								color: #51C4FC;
								margin-top: 146rpx;
								margin-left: 18rpx;
							}

							.texts {
								width: 266rpx;
								margin: auto;
								margin-top: 28rpx;
								z-index: 999;

								.t1 {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 28rpx;
									color: #FFFFFF;
									margin-top: 28rpx;
								}

								.t2 {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 22rpx;
									color: #FFFFFF;
									margin-top: 18rpx;
								}
							}

							.poimage {
								position: absolute;
								width: 302rpx;
								height: 328rpx;
								z-index: -1;
							}
						}
					}

					.titlebox {
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;

						.imgbox {
							width: 34rpx;
							height: 20rpx;
							margin-right: 14rpx;
						}
					}
				}
			}

			.zhilfan {
				width: 686rpx;
				margin: auto;
				margin-top: 32rpx;
				display: block;
				background: linear-gradient(90deg, #E2F8FE 0%, #CBF4FD 47%, #92EFFF 100%);
				box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(134, 134, 134, 0.29);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				overflow: hidden;
			}

			.modulesbox {
				width: 686rpx;
				overflow: hidden;
				margin: auto;

				.bottomboxs {
					display: flex;
					width: 100%;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;


					.box {
						width: 216rpx;
						height: 148rpx;
						position: relative;
						box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);

						.xjt {
							width: 36rpx;
							height: 36rpx;
							position: absolute;
							z-index: 99;
							margin-left: 20rpx;
							margin-top: 90rpx;
						}

						.boximage {
							width: 216rpx;
							height: 148rpx;
							position: absolute;

						}

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							position: absolute;
							color: #1D2129;
							margin-left: 20rpx;
							margin-top: 30rpx;
							z-index: 99;
						}
					}
				}

				.topboxss {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.box1 {
						width: 334rpx;
						position: relative;
						height: 140rpx;
						display: flex;
						align-items: center;
						box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);

						.texts {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #1D2129;
							margin-left: 20rpx;
							z-index: 99;

							.t2 {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #86909C;
								margin-top: 20rpx;
							}
						}

						.box1img {
							width: 334rpx;
							position: absolute;
							height: 140rpx;
						}
					}
				}
			}

			.navboxs {
				width: 686rpx;
				height: 172rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 28rpx auto;

				.itemnav {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #4E5969;

					image {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}

		.tqbox {
			width: 686rpx;
			height: 248rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			overflow: hidden;
			margin: auto;
			margin-top: 30rpx;
			position: relative;
			display: flex;

			.tqboxback {
				position: absolute;
				z-index: -1;
				width: 686rpx;
				height: 248rpx;
			}

			.sunimage {
				width: 204rpx;
				height: 190rpx;
				position: absolute;
				right: 34rpx;
				top: 0rpx;
			}

			.leftbox {
				// width: 250rpx;
				margin-top: 28rpx;
				margin-left: 36rpx;
				overflow: hidden;

				.hbjc {
					width: 180rpx;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					height: 48rpx;
					background: #B1E6FF;
					box-shadow: inset 0rpx 4rpx 12rpx 0rpx #91DCFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					.reduce {
						width: 12rpx;
						height: 12rpx;
						background: #FFFFFF;
						border-radius: 50%;
						margin-left: 8rpx;
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						margin-left: 8rpx;
						color: #1D2129;
					}

					.arrowright {
						width: 24rpx;
						height: 24rpx;
						margin-left: 12rpx;
					}
				}

				.tt {
					font-size: 25rpx;
				}

				.tianqi {
					width: 100%;
					overflow: hidden;
					display: flex;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 76rpx;
						color: #1D2129;
						line-height: 70rpx;
					}

					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						margin-left: 8rpx;
					}
				}
			}
		}
	}
</style>